@use '~@cloudscape-design/design-tokens' as cs;

body {
  background: cs.$color-background-layout-main;
  position: relative;
}

$viewport-breakpoint-s: 912px;

body {
  // Note: This token will be themed (see the product page index.tsx)
  background: cs.$color-background-layout-main;
}

.productPageContentGrid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 0 auto 0;
  margin-block-start: cs.$space-static-xxl;
}

.onThisPageMobile {
  grid-row: 1;
  grid-column: 1 / 3;
  display: none;
  margin-block-end: cs.$space-static-xxl;
}

.productPageAside {
  grid-row: 2;
  grid-column: 2 / 3;
  padding-inline-start: calc(#{cs.$space-scaled-xxxl} /2);
}

.productPageContent {
  grid-row: 2;
  grid-column: 1 / 2;
  padding-inline-end: calc(#{cs.$space-scaled-xxxl} /2);
  margin-bottom: 20px;
}


.productPageAsideSticky {
  position: sticky;
  inset-block-start: 40px;
}

@media only screen and (max-width: $viewport-breakpoint-s) {
  .productPageContentGrid {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
  }

  .onThisPageMobile {
    display: block;
  }

  .productPageMobile {
    display: block;
  }

  .productPageAside {
    display: none;
  }
}


/* High-level sections of the main content area */
.pageSection {
  padding-block-end: cs.$space-static-xxxl;
  margin-block-end: cs.$space-static-xxl;
  border-bottom: 1px solid cs.$color-border-divider-default;

  &:last-child {
    border: none;
    margin-block-end: 0;
  }
}

/* Product details list containing keys and values */
.productDetails {
  display: grid;
  grid-template-columns: 30% 35% 35%;
  margin: 0;
  padding: 0;

  dt {
    color: cs.$color-text-body-secondary;
    font-weight: bold;
  }
  
  dt,
  dd {
    margin: 0;
    padding: 0;
    padding-block: cs.$space-scaled-xs;
    border-block-end: 1px solid cs.$color-border-divider-default;
  }
}

/* List of product cards */
.productCardsList {
  display: flex;
  flex-wrap: wrap;
  column-gap: cs.$space-scaled-l;
  row-gap: cs.$space-scaled-l;

  list-style-type: none;
  margin: 0;
  padding: 0;
}

.productCardsListItem {
  flex: 1;
  flex-basis: 250px;
  max-inline-size: 312px;

  list-style-type: none;
  margin: 0;
  padding: 0;
}
